import React from 'react';
import SideButton from './SideButton';
import SideTheTopButton from './SideTheTopButton';
import { SideType, SideButtonType } from '../../types';

// 按钮入参
export interface SideButtonProps extends SideButtonType {
  index: number
  childrenNotAllowDown: React.MutableRefObject<boolean>
}

// 入参
export interface SideProps extends SideType {
  childrenNotAllowDown: React.MutableRefObject<boolean>
}

function Side(props: SideProps): React.ReactElement {
  const {
    right = 10,
    bottom = 40,
    button,
    childrenNotAllowDown
  } = props;

  // 分类渲染按钮
  function getButton(b: SideButtonType, index: number) {
    const btnProps = {
      key: index,
      ...b,
      index,
      childrenNotAllowDown
    };
    if (b.inlayType === 'theTop') { // 回到顶部按钮
      return (
        <SideTheTopButton
          {...btnProps}
        />
      )
    }
    return ( // 普通按钮
      <SideButton
        {...btnProps}
      />
    )
  }

  return (
    <div
      className="easy-scroll-side"
      style={{
        right,
        bottom,
      }}
    >
      {(() => {
        if (button) {
          if (Array.isArray(button)) {
            return button.map((item, index) => getButton(item, button.length - index))
          }
          return getButton(button, 0)
        }
        return null
      })()}
    </div>
  )
}

export default Side
